<template>
	<div class="home">
		<modal-box v-model="isShowModal"></modal-box>
		<div class="banner"><img :src="[row.work_type ?  bannerImg2 : bannerImg1]"></div>
		<div class="form">
			<ul class="formList">
				<li>
					<div class="name">在哪个城市？</div>
					<div class="for"><select v-model="row.city"><option v-for="(item, index) in cityList" :key="index">{{item.name}}</option></select></div>
				</li>
				<li>
					<div class="name">宝宝出生了没有？</div>
					<div class="for">
						<label><input type="radio" name="work_type" :value="false" v-model="row.work_type"><span class="lab"></span>还没呢</label>
						<label><input type="radio" name="work_type" :value="true" v-model="row.work_type"><span class="lab"></span>已出生</label>
					</div>
				</li>
				<li>
					<div class="name">{{row.work_type ? '宝宝生日？' : '预产期？'}}</div>
					<div class="for">
						<div class="icon"><i class="iconfont icon-rili"></i></div>
						<div class="dateCn" @click="openPicker">{{row.expected_date}}</div>
						<awesome-picker
						ref="picker"
						:textTitle="picker.textTitle"
						:type="picker.type"
						:anchor="picker.anchor"
						@confirm="handlePickerConfirm">
					</awesome-picker>
				</div>
			</li>
			<li>
				<div class="name">对阿姨年龄有要求吗？</div>
				<div class="for">
					<label><input type="radio" name="need_age" :value="false" v-model="need.age"><span class="lab"></span>没要求</label>
					<label><input type="radio" name="need_age" :value="true" v-model="need.age"><span class="lab"></span>有要求</label>
				</div>
			</li>
			<li>
				<div class="name">对阿姨是哪里人有要求吗？</div>
				<div class="for">
					<label><input type="radio" name="need_area" :value="false" v-model="need.area"><span class="lab"></span>没要求</label>
					<label><input type="radio" name="need_area" :value="true" v-model="need.area"><span class="lab"></span>有要求</label>
				</div>
			</li>
			<li>
				<div class="name">对阿姨技能有哪些要求？</div>
				<div class="for">
					<label class="sty2" v-for="(item, index) in  skill" :key="item">
						<input type="checkbox" name="need_skill" :value="item" v-model="need.skill">
						<span class="lab"></span>{{item}}
					</label>
				</div>
			</li>
			<li><div class="for"><input type="number" name="phone" placeholder="输入您的手机号" v-model="row.phone"></div></li>
			<li><div class="for"><button class="button" type="button" @click="addGeneralize">立即报价</button></div></li>
		</ul>
	</div>



	<aunt-list v-model="isShowModal"></aunt-list>
	<bottom-banner></bottom-banner>
	<nav-cn v-model="isShowModal"></nav-cn>


</div>
</template>

<script>
	import _Bank from '@/assets/utils/bank'
	import navCn from '@/components/navCn'
	import auntList from '@/components/auntList'
	import bottomBanner from '@/components/bottomBanner'
	import modalBox from '@/components/modalBox'

	import AwesomePicker from '@/components/vue-awesome-picker';


	export default {
		name:'home',
		data(){
			return{
				isShowModal:'',
				picker: {
					anchor: [],
					textTitle: '请选择日期',
					type: 'date'
				},
				bannerImg1: require('@/assets/images/banner-lv-yuesao.png'),
				bannerImg2: require('@/assets/images/banner-lv-yuersao.png'),
				cityList:[],
				skill:['做饭好吃', '会小儿推拿', '普通话要好', '情商高'],
				need_skill:[
				['做饭好吃', '会小儿推拿', '普通话要好', '情商高'],
				['辅食做的好', '家务做的好', '擅长宝宝早教', '擅长新生儿护理']
				],
				need:{
					age:false,
					area:false,
					skill:['做饭好吃']
				},
				row:{
					phone: '',
					work_type:false,
					city: '北京',
					skill: null,
					customer_need: null,
					expected_date: new Date().toLocaleDateString().replace(/\//g,'-'),
					baby_age: null,
					source:'SEM推广',
					source_url: window.location.href
				}
			}
		},
		components:{navCn, auntList, bottomBanner, modalBox, AwesomePicker},
		watch:{
			"row.work_type": function(val){
				if (val) {
					this.skill = this.need_skill[1]
					this.need.skill = [this.need_skill[1][0]]

				}else{
					this.skill = this.need_skill[0]
					this.need.skill = [this.need_skill[0][0]]

				}
			},
			need: {
				handler: function (val, oldVal) { 
					let string = ''
					if (val.age) {
						string = '对阿姨年龄有要求, '
					}
					if (val.area) {
						string += '对阿姨是哪里人有要求, '
					}
					if (val.skill.length) {
						string += '技能要求: '
						for (var i = 0; i < val.skill.length; i++) {
							string += val.skill[i]+', '
						}
					}
					this.row.customer_need = string
				},
				deep: true
			},
		},
		methods:{
			openPicker(){
				this.$refs.picker.show()
			},
			handlePickerCancel(){

			},
			handlePickerConfirm(data){
				let string = '' 
				data.forEach(name=>{
					string += name.value.replace(/([\u4e00-\u9fa5])/g, function(s){
						return s == '年' || s == '月' ? '-' : ''
					})
				})
				this.row.expected_date = string


			},
			verification(){
				if (this.row.city) {
					if (_Bank.checkPhone(this.row.phone)) {
						return true
					}else{
						alert('填写正确的手机号码')
						return false
					}

				}else{
					alert('请选择城市')
					return false
				}
			},
			addGeneralize(){
				let data = this.row;
				data.work_type = data.work_type ? '育儿嫂':'月嫂'
				if (this.verification()) {
					this.$http.post('addGeneralize', {row:data})
					.then(response=>{
						if (response.success) {
							this.isShowModal = 'makeSucceed'
						}
					})
				}
			},
			getSource(){
				if (this.$route.query.source) {
					let config = {
						baseURL:'http://admin.mumway.com/api/index/',
					}
					this.$http.post('getchannel', {}, config)
					.then(response=>{
						console.log(response)
						let source = _Bank.promotionType(response, this.$route.query.source)
						this.row.source = source
						this.$store.dispatch('setSource', {source:source})
					})
				}
			},
			getCity(){
				let config = {
					baseURL:'http://admin.mumway.com/index/activity/cityList',
				}
				this.$http.post('cityList', {}, config)
				.then(response=>{
					if (response.success) {
						this.cityList = response.data
					}
				})
			},

		},
		mounted(){
			this.getSource()
			this.getCity()
		}
	}
</script>
<style scoped lang="scss">
@import '@/assets/utils/utils.scss';

.home{
	width: 100%;
	padding-bottom:110px;
}
.banner{
	width: 100%;
	img{
		width: 100%;
	}
}


.form{
	padding:28px;

	.formList{
		width: 100%;
		li{
			margin-top: 50px;
			div.name{
				font-size: 28px;
				color: #454545;
			}
			div.for{
				margin-top: 10px;
				position: relative;
				div.icon{
					position: absolute;
					width: 76px;
					height: 76px;
					z-index: 9;
					color: $themeColor;
					text-align: center;
					line-height: 76px;
					i{
						font-size: 40px;
					}
				}
				div.dateCn,
				input,
				select{
					width: 100%;
					height: 76px;
					border:1px solid #999;
					padding:0 30px;
					font-size: 28px;
				}
				div.dateCn{
					line-height: 74px;
					padding-left:70px;
					color: #333;
				}
				input.date{
					width: 590px;
					height: 76px;
					border:1px solid #999;
					border-radius:8px;
					padding-left:100px;
					padding-right:30px;
				}

				label.sty2{
					width: 280px;
				}

				label{
					display: inline-block;
					width: 200px;
					line-height: 60px;
					position: relative;
					font-size: 28px;
					color: #454545;
					padding-left:58px;
					input[type=checkbox],
					input[type=radio]{
						display: none;
					}
					input[type=checkbox] + span,
					input[type=radio] + span{
						display: block;
						position: absolute;
						width: 41px;
						height: 40px;
						top:9px;
						left:6px;
						border-radius:50%;
						border:2px solid #ccc;
						&:after{
							content:'';
							position: absolute;
							top:18px;
							left:19px;
							width: 20px;
							height: 20px;
							border-radius:50%;
							background-color: #ccc;
							margin-top: -10px;
							margin-left: -10px;
							z-index: 9;
						}
					}
					input[type=checkbox]:checked + span,
					input[type=radio]:checked + span{
						border:2px solid $themeColor;
						&:after{
							background-color: $themeColor;
						}
					}
				}
			}
		}
	}
}
</style>